<template>
  <div class="h-6 bg-[#3c3f41] border-t border-[#2b2b2b] flex items-center px-4 text-gray-400 text-xs">
    <div class="flex items-center space-x-4">
      <!-- Git 状态 -->
      <div class="flex items-center space-x-2">
        <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
          <path d="M2.6,10.59L8.38,4.8L10.07,6.5C9.83,7.35 10.22,8.28 11,8.73V14.27C10.4,14.61 10,15.26 10,16A2,2 0 0,0 12,18A2,2 0 0,0 14,16C14,15.26 13.6,14.61 13,14.27V9.41L15.07,11.5C15,11.65 15,11.82 15,12A2,2 0 0,0 17,14A2,2 0 0,0 19,12A2,2 0 0,0 17,10C16.82,10 16.65,10 16.5,10.07L13.93,7.5C14.19,6.57 13.71,5.55 12.78,5.16C12.35,5 11.9,4.96 11.5,5.07L9.8,3.38L10.59,2.6C11.37,1.81 12.63,1.81 13.41,2.6L21.4,10.59C22.19,11.37 22.19,12.63 21.4,13.41L13.41,21.4C12.63,22.19 11.37,22.19 10.59,21.4L2.6,13.41C1.81,12.63 1.81,11.37 2.6,10.59Z"/>
        </svg>
        <span>main</span>
      </div>
      
      <!-- 文件信息 -->
      <div class="flex items-center space-x-2">
        <span>UTF-8</span>
        <span>LF</span>
        <span>JavaScript</span>
      </div>
    </div>

    <!-- 右侧信息 -->
    <div class="ml-auto flex items-center space-x-4">
      <!-- 行列信息 -->
      <span>Ln 1, Col 1</span>
      
      <!-- 通知图标 -->
      <div class="flex items-center space-x-2">
        <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"/>
        </svg>
        <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
          <path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/>
        </svg>
      </div>
    </div>
  </div>
</template>

<script setup>
// 可以添加一些响应式数据和方法
import { ref } from 'vue'

const currentBranch = ref('main')
const encoding = ref('UTF-8')
const lineEnding = ref('LF')
const fileType = ref('JavaScript')
const cursorPosition = ref({ line: 1, column: 1 })
</script> 